<template>
  <div>
      <div id="sheetmessage">
                <div id="canhiden">
                    <img id="sheetimg" :src="coverImgUrl" alt="">
                    <h2 class="sheettext" style="font-size: 23px;">{{name}}</h2>
                    <div class="sheettext">{{nickname}}</div>
                    <div class="sheettext">播放量：{{playCount}}</div>
                    <div class="sheettext">收藏量：{{subscribedCount}}</div>

                </div>
                <h3 class="sheettext" style="font-weight: 600;">简介</h3>
                <div id="brief">{{description}}
                    <span @click="behight" id="behight">[ <span style="color: #750310; cursor: default;">详情</span> ]</span>
                    <span @click="below" id="below" style="display: none;">[ <span style="color: #750310; cursor: default;">收起</span> ]</span>
                </div>
            </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'brief',
    data(){
        return{
                  // 歌单信息
                id: "2872125986",
                coverImgUrl: "https://p1.music.126.net/mYFsICLOuhVgzfrSnxvT6g==/109951164891018906.jpg",
                nickname: "十三逆旅",
                name: "『神级现场』让人泪目的欧美经典",
                playCount: 3930993,
                subscribedCount: 45614,
                description: "坐在柔软的书店沙发上，喝一杯咖啡，听着一首首清新温暖的歌曲，生活真的就是这么简单和美好。.",
                description_det: "",
                songid: '25542198',
        }
    },
        mounted: function() {
                this.loading();
            },
    methods:{
        strchange: function(m, n) {
                    let ms = m + '';
                    if (ms.length > n) {
                        let a = ms.slice(0, n - 1);
                        a = a.concat('...')
                            // console.log(a)
                        return a;
                    } else {
                        return ms
                    }

                },
                behight() {
                    document.getElementById("canhiden").style.display = "none";
                    document.getElementById("brief").style.height = "450px";
                    document.getElementById("brief").style.overflowY = "scroll";
                    document.getElementById("below").style.display = "block";
                    document.getElementById("behight").style.display = "none";
                    [this.description, this.description_det] = [this.description_det, this.description]
                },
                below() {
                    document.getElementById("canhiden").style.display = "block";
                    document.getElementById("brief").style.height = "120px";
                    document.getElementById("brief").style.overflowY = "hidden";
                    document.getElementById("behight").style.display = "block";
                    document.getElementById("below").style.display = "none";
                    [this.description_det, this.description] = [this.description, this.description_det]
                },
                loading: function() {
                    let that = this;
                    axios.get("http://39.101.203.189:3000/playlist/detail?id=" + this.$route.query.sheetid).then(function(response) {
                        console.log(response.data.playlist);
                        let res0 = response.data.playlist;
                        that.name = res0.name;
                        that.nickname = res0.nickname;
                        that.coverImgUrl = res0.coverImgUrl;
                        that.subscribedCount = res0.subscribedCount;
                        that.playCount = res0.playCount;
                        that.description_det = res0.description;
                        that.description = that.strchange(res0.description, 100);
                    }, function(err) {})
                },
    }

}
</script>

<style scoped>
#song-block {
     position: relative;
     width: 1200px;
     height: 800px;
 }
 
 #sheetimg {
     position: relative;
     top: 10px;
     left: 0px;
     max-width: 180px;
     max-height: 300px;
     color: aliceblue;
 }
 
 .sheettext {
     position: relative;
     width: 300px;
     top: 50px;
     left: 0px;
     color: #fff;
     font-size: 18px;
     opacity: 0.9;
     font-weight: 300;
 }
 
 #brief {
     position: relative;
     top: 53px;
     left: 0px;
     width: 320px;
     height: 120px;
     color: #fff;
     opacity: 0.9;
     animation: behight 0.5s linear forwards;
     animation-play-state: paused;
 }
 
 @keyframes behight {
     to {
         height: 540px;
         top: 10px;
         overflow-y: scroll;
         overflow-x: hidden;
     }
 }
</style>